<template>
  <div class="afd-config-form">
    <el-form label-position="left" label-suffix="：" label-width="120px">
      <el-form-item label="数据库">
        <el-input placeholder="数据库" disabled="true" v-model="data.dbName" ></el-input>
      </el-form-item>
      <el-form-item label="表名">
        <el-input placeholder="表名" disabled="true"  v-model="data.tableName"></el-input>
      </el-form-item>
      <el-form-item label="表注释">
        <el-input placeholder="表注释" disabled="true"  v-model="data.tableComment"></el-input>
      </el-form-item>
<!--      <el-form-item label="是否登录填报">-->
<!--        <el-switch v-model="data.auth"></el-switch>-->
<!--      </el-form-item>-->
      <el-form-item label="填报开始时间">
        <el-date-picker
                size="small"
                v-model="data.inputStartTime"
                type="datetime"
                placeholder="开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="填报结束时间">
        <el-date-picker
                size="small"
                v-model="data.inputEndTime"
                type="datetime"
                placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>


      <el-form-item label="背景色" >
        <el-color-picker v-model="data.bgColor"></el-color-picker>
      </el-form-item>

      <el-form-item label="背景图片" >
        <el-input v-model="data.bgImg" placeholder="背景图片" clearable></el-input>
      </el-form-item>

      <el-form-item label="PC2边留白%" >
        <el-input-number
                v-model="data.bgMargin"
                :min="0"
                :max="20"
                :step="1"
                controls-position="right"
                placeholder="PC2边留白"
                style="width: 100%"
        ></el-input-number>
      </el-form-item>

        <el-form-item label="返回地址 " >
            <el-input v-model="data.callback" placeholder="返回地址" clearable></el-input>
        </el-form-item>

      <el-form-item label="清空按钮文字" v-if="data.menuBtn && data.emptyBtn">
        <el-input v-model="data.emptyText" placeholder="提交按钮的文字" clearable></el-input>
      </el-form-item>

      <el-form-item label="标签对齐方式">
        <el-select v-model="data.labelPosition" placeholder="标签对齐方式">
          <el-option label="左对齐" value="left"></el-option>
          <el-option label="右对齐" value="right"></el-option>
          <el-option label="顶部对齐" value="top"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签宽度">
        <el-input-number
          v-model="data.labelWidth"
          :min="80"
          :max="200"
          :step="10"
          controls-position="right"
          placeholder="标签宽度"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="标签后缀">
        <el-input v-model="data.labelSuffix" placeholder="标签后缀"></el-input>
      </el-form-item>
      <el-form-item label="项之间的间隔">
        <el-input-number
          v-model="data.gutter"
          :min="0"
          :max="60"
          :step="5"
          controls-position="right"
          placeholder="项之间的间隔"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="是否显示标题">
        <el-switch v-model="data.showTitle"></el-switch>
      </el-form-item>

      <el-form-item label="多分组转标签">
        <el-switch v-model="data.tabs" active-color="#409EFF"></el-switch>
      </el-form-item>

<!--      <el-form-item label="标签位置" v-if="data.tabs">-->
<!--        <el-select v-model="data.tabsPosition" placeholder="标签位置">-->
<!--          <el-option label="无" value="0"></el-option>-->
<!--          <el-option label="顶部" value="1"></el-option>-->
<!--          <el-option label="底部" value="1"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item label="详情模式">
        <el-switch v-model="data.detail"></el-switch>
      </el-form-item>
      <el-form-item label="显示按钮">
        <el-switch v-model="data.menuBtn" active-color="#409EFF"></el-switch>
      </el-form-item>
      <el-form-item label="显示提交按钮" v-if="data.menuBtn">
        <el-switch v-model="data.submitBtn" active-color="#409EFF"></el-switch>
      </el-form-item>
      <el-form-item label="提交按钮文字" v-if="data.menuBtn && data.submitBtn">
        <el-input v-model="data.submitText" placeholder="提交按钮的文字" clearable></el-input>
      </el-form-item>
      <el-form-item label="显示清空按钮" v-if="data.menuBtn">
        <el-switch v-model="data.emptyBtn" active-color="#409EFF"></el-switch>
      </el-form-item>
      <el-form-item label="清空按钮文字" v-if="data.menuBtn && data.emptyBtn">
        <el-input v-model="data.emptyText" placeholder="提交按钮的文字" clearable></el-input>
      </el-form-item>
      <el-form-item label="显示打印按钮" v-if="data.menuBtn">
        <el-switch v-model="data.printCommBtn" active-color="#409EFF"></el-switch>
      </el-form-item>
      <el-form-item label="打印显示单行" v-if="data.printCommBtn">
        <el-switch v-model="data.printOneRow" active-color="#409EFF"></el-switch>
      </el-form-item>
      <el-form-item label="打印显示抬头" v-if="data.printCommBtn">
        <el-switch v-model="data.printShowTitle" active-color="#409EFF"></el-switch>
      </el-form-item>
      <el-form-item label="全局只读">
        <el-switch v-model="data.readonly"></el-switch>
      </el-form-item>
      <el-form-item label="全局禁用">
        <el-switch v-model="data.disabled"></el-switch>
      </el-form-item>
<!--      <el-form-item label="表格模式">-->
<!--        <el-switch v-model="data.isGrid"></el-switch>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="是否分组">-->
<!--        <el-switch v-model="data.isGroup"></el-switch>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="是否分组按步骤提交">-->
<!--        <el-switch v-model="data.isGroupSubmit"></el-switch>-->
<!--      </el-form-item>-->
      <el-form-item label="组件尺寸">
        <el-radio-group v-model="data.size">
          <el-radio-button label="large">大</el-radio-button>
          <el-radio-button label="default">默认</el-radio-button>
          <el-radio-button label="small">小</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="全局样式" >
        <el-input type="textarea" v-model="data.gclass" placeholder="全局样式" :rows="5" clearable></el-input>
      </el-form-item>

      <el-form-item label="保持前Js" >
        <el-input type="textarea" v-model="data.beforJs" placeholder="保持前Js" :rows="5" clearable >

          // &data->表单对象
          function beforFromeSave($data) {
              //this.$message.error( "没有鉴权"+JSON.stringify($data));
              return false;
          }


        </el-input>
      </el-form-item>


      <el-form-item label="保持后Js" >
        <el-input type="textarea" v-model="data.afterJs"  placeholder="保持后Js" :rows="5" clearable>
          // &data->表单对象
          function afterFromeSave($data) {
              //this.$message.error( "没有鉴权"+JSON.stringify($data));
          return false;
          }
        </el-input>
      </el-form-item>

      <el-form-item label="全局监听" >
        <el-input type="textarea" v-model="data.allJs"  placeholder="全局监听" :rows="5" clearable>

        </el-input>
      </el-form-item>

    </el-form>
  </div>
</template>

<script setup>
defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>
<style lang="scss" scoped>
.afd-config-form {
  padding: 10px 0 0 0;
}
</style>
